<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Turf - random</title>
  <style>
    #mapDiv { width: 980px; height: 600px; }
    .map-box{ padding: 10px; }
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/turf.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
</head>
<body onload="initMap()">
  <div id="mapDiv"></div>


<script>
var map, infoWindow = new google.maps.InfoWindow({ content: "" });
google.maps.InfoWindow.prototype.isOpen = function(){
  var map = this.getMap();
  return (map !== null && typeof map !== "undefined");
}

function initMap() {

  var data={type:"FeatureCollection",features:[{type:"Feature",properties:{gtype: "box"},geometry:{type:"Polygon",coordinates:[[[121.51183,25.05127],[121.51183,25.06538],[121.52831,25.06538],[121.52831,25.05127],[121.51183,25.05127]]]}},{type:"Feature",properties:{gtype: "box"},geometry:{type:"Polygon",coordinates:[[[121.53290,25.04439],[121.53290,25.06453],[121.54655,25.06453],[121.54655,25.04439],[121.53290,25.04439]]]}}]};

  // points1
  var points1 = turf.random('points', 10, { bbox: [121.5118360519409, 25.051274198147734, 121.5283155441284, 25.06538619563029]});
  for (var i = 0; i < points1.features.length; i++) { points1.features[i].properties.point = ~~(Math.random() * 100 +1); }

  // points2
  var points2 = turf.random('points', 10, { bbox: [121.5329074859619, 25.04439255221216, 121.54655456542969, 25.06453096931927]});
  for (var i = 0; i < points2.features.length; i++) { points2.features[i].properties.point = ~~(Math.random() * 100 + 1); }

  // 地圖初始設定
  var mapOptions = {
      center: new google.maps.LatLng(25.05464, 121.52876),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapElement = document.getElementById("mapDiv");

  // Google 地圖初始化
  map = new google.maps.Map(mapElement, mapOptions);

  map.data.setStyle(function(feature) {
    // points
    if( feature.getProperty('point') ){
      return { icon: new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|80e516|15|b|" + feature.getProperty('point')) };
    }
  });

  // 載入 GeoJSON 資料
  map.data.addGeoJson(data);
  map.data.addGeoJson(points1);
  map.data.addGeoJson(points2);

  map.data.addListener('click', function(e) {

    if( !!e.feature.getProperty('gtype') ){
      infoWindow.setContent('<div class="map-box">box</div>');
    }
    else if( !!e.feature.getProperty('point') ){
      infoWindow.setContent('<div class="map-box">' + e.feature.getProperty('point') + "</div>");
    }
    var anchor = new google.maps.MVCObject();
    anchor.set("position", e.latLng);
    infoWindow.open(map,anchor);
  });
}

</script>


</body>
</html>